<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">风险企业维护</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width: 25px" />
      </div>
    </div>
    <div class="main">
      <el-input v-model="input" style="max-width: 400px" placeholder="请输入">
        <template #prepend>
          <el-select
            v-model="select"
            placeholder="搜索方式"
            style="width: 115px"
          >
            <el-option label="企业名" value="企业名" />
            <el-option label="企业类型" value="企业类型" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="Searchby" />
        </template>
      </el-input>
      <div class="row">
        <div>
          <el-icon @click="refresh" style="margin-top: 10px">
            <Refresh />
          </el-icon>
          <el-text>刷新</el-text>
        </div>

        <el-icon style="margin-top: 10px" size="30px" @click="addForm = true">
          <CirclePlus />
        </el-icon>
      </div>

      <el-scrollbar height="430px" style="margin-top: 5px;position:relative;">
        <div
          v-for="enterprise in enterpriseArr"
          :key="enterprise.enterpriseID"
          class="scrollbar-demo-item"

          style="padding-left: 10px;"
        >
          <div class="row"  >
            <el-text>企业ID:{{ enterprise.enterpriseID }}</el-text>
          </div>
          <span>地址:{{ enterprise.address }}</span
          ><br />

          <span> 企业名:{{ enterprise.enterpriseName }}</span><br />
          <span>
            企业类型:{{ enterprise.enterpriseType }}</span
          ><br />

          <span >法人:{{ enterprise.legalPerson }}</span>
          <span style="margin-left: 50px;">法人电话:{{ enterprise.legalpersonphone }}</span
          ><br />

          <span>企业经度:{{ enterprise.latitude }}</span>
          <span style="margin-left: 55px"> 企业纬度:{{ enterprise.longitude }}</span
          ><br />
        </div>
      </el-scrollbar>
      <el-dialog v-model="addForm" title="添加企业" width="300">
        <el-form :model="enterpriseAdd">
          <el-form-item label="企业名">
            <el-input
              v-model="enterpriseAdd.enterpriseName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="企业类型">
            <el-input
              v-model="enterpriseAdd.enterpriseType"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="法人">
            <el-input v-model="enterpriseAdd.legalPerson" autocomplete="off" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              v-model="enterpriseAdd.legalPersonPhone"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="位置">
            <el-input v-model="enterpriseAdd.address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="经度">
            <el-input v-model="enterpriseAdd.latitude" autocomplete="off" />
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="enterpriseAdd.longitude" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addForm = false">取消</el-button>
            <el-button type="primary" @click="addEnterprise"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { ElMessageBox, ElLoading, ElMessage } from "element-plus";
import {
  ArrowLeft,
  Search,
  Edit,
  Service,
  DeleteFilled,
  CirclePlus,
  Refresh,
} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");
let addForm = ref(false);
let updateForm = ref(false);
let select = ref("");
let input = ref("");
let enterprise = ref({});
let enterpriseAdd = ref({
  enterpriseName: "",
  address: "",
  legalPersonPhone: "",
  latitude: "",
  longitude: "",
  enterpriseType: "",
  legalPerson: "",
});
let enterpriseUpdate = ref({
  enterpriseName: "",
  address: "",
  legalPersonPhone: "",
  latitude: "",
  longitude: "",
  enterpriseType: "",
  legalPerson: "",
});
let enterpriseArr = ref([]);
const Searchby = () => {
  if (select.value == "企业名") {
    axios
      .post("/Worker/listEnterpriseInfoByName ", {
        enterpriseName: input.value,
      })
      .then((response) => {
        enterpriseArr.value = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  } else if (select.value == "企业类型") {
    axios
      .post("/Worker/listEnterpriseInfoByType ", {
        enterpriseType: input.value,
      })
      .then((response) => {
        enterpriseArr.value = response.data;
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }
};

const init = () => {
  axios
    .post("/Worker/listAllEnterpriseInfo ", {})
    .then((response) => {
      enterpriseArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
const addEnterprise = () => {
  axios
    .post("/Worker/insertEnterprise ", {
      enterpriseName: enterpriseAdd.value.enterpriseName,
      address: enterpriseAdd.value.address,
      legalpersonphone: enterpriseAdd.value.legalPersonPhone,
      latitude: enterpriseAdd.value.latitude,
      longitude: enterpriseAdd.value.longitude,
      enterpriseType: enterpriseAdd.value.enterpriseType,
      legalPerson: enterpriseAdd.value.legalPerson,
    })
    .then((response) => {
      if (response.data == 1) {
        addForm.value = false
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        enterpriseAdd.value = "";
      } else {
        ElMessage({
          message: "添加失败,请检查电话是否正确",
          type: "warning",
        });
      }
      init();
    })
    .catch((error) => {
      console.log(error);
      ElMessage({
        message: "添加失败",
        type: "warning",
      });
    });
};
const refresh = () => {
  init();
};
const back = () => {
  router.go(-1);
};
const self = () => {
  router.push("/workerMainPage/workerSelfPage");
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}



.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}

.scrollbar-demo-item {
  height: 130px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.main {
  margin: 20px;
}
</style>